<template>
	<view class="charts-box">
		<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" canvas2d canvasId="canvasId"
			:disableScroll="true" :onzoom="true" />
	</view>
</template>

<script>
	import {
		callCloudFunction
	} from '@/api/requests.js'
	export default {
		name: 'datePropertiesChart',
		data() {
			return {
				userInfo: {},
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: false,
						scrollShow: true,
						itemCount: 4,
						rotateLabel: true,
						rotateAngle: 30,
					},
					yAxis: {
						data: [{
							min: 0,
							max: 0,
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			}
		},
		computed: {

		},
		methods: {
			getDateProperties() {
				callCloudFunction('getDateProperties', {
					owner: this.userInfo._id,
				}, res => {
					this.dateProperties = res.result.data.sort((day1, day2) => {
						const time1 = new Date(day1.date).getTime()
						const time2 = new Date(day2.date).getTime()
						return time1 - time2
					})
					this.handleList()
				}, err => {
					uni.showModal({
						content: `查询失败`,
						showCancel: false
					})
				})
			},
			handleList() {
				// let categories = ["2018", "2019", "2020", "2021", "2022", "2023"]
				// let series = [{
				// 		name: "目标值",
				// 		data: [35, 36, 31, 33, 13, 34]
				// 	},
				// 	{
				// 		name: "完成量",
				// 		data: [18, 27, 21, 24, 6, 28]
				// 	}
				// ]
				let categories = []
				let min = 0
				let max = 0
				let series = [{
					name: "资产总额",
					data: []
				}]
				this.dateProperties.forEach((item, index) => {
					categories.push(item.date.split(' ')[0])
					series[0].data.push(item.total)
					min = min > item.total ? item.total : min
					max = max > item.total ? max : item.total
				})
				this.chartData = {
					categories,
					series
				}
				this.opts.yAxis.data[0].max = max > 0 ? max : 0
				this.opts.yAxis.data[0].min = min > 0 ? 0 : min
			}
		},
		mounted() {
			const that = this
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					that.userInfo = res.data
					that.getDateProperties()
				}
			});
		}
	}
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 100%;
	}
</style>
